import { Callout } from "nextra-theme-docs";
import { ActivityDiagram } from "../../../components/diagrams/ActivityDiagram";
import { APITable } from "../../../components/APITable";

# Activity

<ActivityDiagram />

**Activity** is a single screen that gets stacked one by one. Activities have the following properties and can be accessed using the `useActivity()` hook if needed.

<APITable>
|                 |                                                          |                                                          |
| --------------- | -------------------------------------------------------- | -------------------------------------------------------- |
| id              | `string`                                                 | Unique ID value for each activated activity screen       |
| name            | `string`                                                 | Registerd activity name                                  |
| transitionState | `enter-active`, `enter-done`, `exit-active`, `exit-done` | Transition state of current activity |
</APITable>

## Registering an Activity

To actually use an activity, you need to register it with the `stackflow()` function before using it. An activity is a React component declared with the type `ActivityComponentType`.

```tsx showLineNumbers filename="MyActivity.tsx" copy
import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";

const MyActivity: ActivityComponentType = () => {
  return (
    <AppScreen appBar={{ title: "My Activity" }}>
      <div>My Activity</div>
    </AppScreen>
  );
};

export default MyActivity;
```

<Callout emoji="💡">
  `ActivityComponentType` is compatible with `React.ComponentType`. Therefore, you can continue to use `React.FC`, `React.Component`, etc., as you have been.
</Callout>
<Callout emoji="💡">
  **Stackflow** does not provide a default UI. Instead, it offers basic iOS (`cupertino`) and Android (`android`) UIs through the `@stackflow/plugin-basic-ui`.
</Callout>

If you have declared the activity correctly, register it in the `activities` field of the `stackflow()` function as follows.

```tsx showLineNumbers filename="stackflow.ts" copy
import { stackflow } from "@stackflow/react";
import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic";
import { basicUIPlugin } from "@stackflow/plugin-basic-ui";
import MyActivity from "./MyActivity";

export const { Stack, useFlow } = stackflow({
  transitionDuration: 350,
  plugins: [
    basicRendererPlugin(),
    basicUIPlugin({
      theme: "cupertino",
    }),
  ],
  activities: {
    MyActivity,
  },
});
```

## Registering initial Activity

Have you successfully registered the activity? However, the `<Stack />` component that you initialized earlier might not be rendering anything. This is because you haven't set an initial activity. If you want to load a specific activity initially, add the `initialActivity` option as follows.

```ts showLineNumbers {16} filename="stackflow.ts" copy
import { stackflow } from "@stackflow/react";
import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic";
import { basicUIPlugin } from "@stackflow/plugin-basic-ui";
import MyActivity from "./MyActivity";

export const { Stack, useFlow } = stackflow({
  transitionDuration: 350,
  plugins: [
    basicRendererPlugin(),
    basicUIPlugin({
      theme: "cupertino",
    }),
  ],
  activities: {
    MyActivity,
  },
  initialActivity: () => "MyActivity",
});
```

If you have successfully registered the initial activity, you can see the rendered result on the screen.

<Callout emoji="💡">
  Have you experienced the auto-completion of the `MyActivity` value in TypeScript?
  **Stackflow** will help improve your development productivity through such auto-completion experiences.
</Callout>

## Registering Activity with Parameters

Some activities require specific parameters when used. In such cases, declare the parameter as the activity's Props.

```tsx showLineNumbers filename="Article.tsx" copy
import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";

type ArticleParams = {
  title: string;
};

const Article: ActivityComponentType<ArticleParams> = ({ params }) => {
  return (
    <AppScreen appBar={{ title: "Article" }}>
      <div>
        <h1>{params.title}</h1>
      </div>
    </AppScreen>
  );
};

export default Article;
```

Or,

```tsx showLineNumbers filename="Article.tsx" copy
import { AppScreen } from "@stackflow/plugin-basic-ui";

type ArticleParams = {
  params: {
    title: string;
  };
};

const Article: React.FC<ArticleParams> = ({ params: { title } }) => {
  return (
    <AppScreen appBar={{ title: "Article" }}>
      <div>
        <h1>{title}</h1>
      </div>
    </AppScreen>
  );
};

export default Article;
```

<Callout type="warning" emoji="⚠️">
  **Caution** - If the required parameters are not passed from the previous screen, a critical error may occur.
</Callout>
<Callout type="error" emoji="🚫">
  **Warning** - Initial activity must not require parameters.
</Callout>

---

Have you successfully registered the activity? Now, let's learn how to open the registered activity and navigate between them.
